import { observer } from 'mobx-react-lite';
import { Img } from '@/components';
import { useGlobalStore } from '@/mobx';
// import { useFormatText } from '@/hooks';
import LoadingGif from '@/assets/images/common/loading.svg';

// 全局loading组件
function Loading() {
  // const { text } = useFormatText();

  return (
    <div className='flex items-center justify-center w-full h-full bg-mask fixed left-0 right-0 bottom-0 top-0 animate-opacity-0-100 z-1000'>
      <div className=''>
        <Img className='w-24' src={LoadingGif} />
        {/* <div className='mt-2.5 text-center text-white text-xs'>
          {text('加载中', 'loading')}
          ...
        </div> */}
      </div>
    </div>
  );
}

// 全局页面中的loading
export const CommonLoading = observer(() => {
  const { isLoading } = useGlobalStore();

  if (isLoading) {
    return <Loading />;
  }

  return null;
});
